<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>节目访谈思多客</title>
    <link href="http://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/public/css/m/public.css">
    <link rel="stylesheet" href="/public/css/m/video.css">
</head>

<body>
    <div class="n-page">
        <div id="header"></div>
        <div class="content">
            <div id="nav"></div>
            <div class="row n-look-box">
                <h3 class="video-title">直播要闻</h3>
                <div class="news-show-img">
                    <div class="video-content" id="J_news_video"></div>
                    <div class="news-img-dec" id="J_news_outline"></div>
                </div>
                <div class="video-warp">
                    <div class="video-time-box clearfix" id="J_news"></div>
                </div>
                <h3 class="video-title">导师访谈</h3>
                <div class="news-show-img">
                    <div class="video-content" id="J_live_video"></div>
                    <div class="news-img-dec" id="J_live_outline"></div>
                </div>
                <div class="video-warp">
                    <div class="video-time-box clearfix" id="J_live"></div>
                </div>
                <h3 class="video-title">股叔奇谈</h3>
                <div class="news-show-img">
                    <div class="video-content" id="J_uncle_video"></div>
                    <div class="news-img-dec" id="J_uncle_outline"></div>
                </div>
                <div class="video-warp">
                    <div class="video-time-box clearfix" id="J_uncle"></div>
                </div>
            </div>
        </div>
        <div id="footer"></div>
    </div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="/public/js/m/fontResize.js"></script>
<script src="/public/lib/layer/layui.js"></script>
<script src="/public/js/G.js"></script>
<script src="/public/js/user.js"></script>
<script src="/public/js/video.js"></script>
<script src="/public/js/m/public.js"></script>
<script id="J_news_tpl" type="text/html">
    {{# d.list.forEach(function(val,index){ }}
    <div class="show-time-tag {{# if(index == 0){ }}active-tab{{# };}}" data-content="{{val.content}}" data-url='{{val.videoUrl}}'>{{val.title}}</div>
    {{# }); }}
</script>
<script>
layui.use('laytpl', function() {
    var laytpl = layui.laytpl;
    var live = {
        pageSize: 20,
        categoryId: 1
    }
    var talk = {
        pageSize: 20,
        categoryId: 2
    }
    var uncle = {
        pageSize: 20,
        categoryId: 3
    }
    video.getList(live, function(data) {
        laytpl($('#J_news_tpl').html()).render(data, function(html) {
            $('#J_news').html(html)
            $('#J_news').width((($('#J_news').children().width() + 10.5) * $('#J_news').children().length))
        })
        console.log(data)
        $('#J_news_video').html(data.list[0].videoUrl)
        $("#J_news_outline").text(data.list[0].content)
    })
    video.getList(talk, function(data) {
        laytpl($('#J_news_tpl').html()).render(data, function(html) {
            $('#J_live').html(html)
            $('#J_live').width((($('#J_live').children().width() + 10.5) * $('#J_live').children().length))
        })
        $('#J_live_video').html(data.list[0].videoUrl)
        $("#J_live_outline").text(data.list[0].content)
    })
    video.getList(uncle, function(data) {
        laytpl($('#J_news_tpl').html()).render(data, function(html) {
            $('#J_uncle').html(html)
            $('#J_uncle').width((($('#J_uncle').children().width() + 10.5) * $('#J_uncle').children().length))
        })
        $('#J_uncle_video').html(data.list[0].videoUrl)
        $("#J_uncle_outline").text(data.list[0].content)
    })

});
//视频切换
$(document).on('click', '#J_news div,#J_live div,#J_uncle div', function() {
    if (!$(this).hasClass('active-tab')) {
        $(this).addClass('active-tab');
        $(this).siblings('.active-tab').removeClass('active-tab');
    }
    var content = $(this).data('content')
    var url = $(this).data('url')
    console.log(content, url)
    setVideoUrl($(this), url)
})

function setVideoUrl(dom, url) {
    if (!dom.hasClass('active-tab')) {
        dom.addClass('active-tab');
        dom.siblings('.active-tab').removeClass('active-tab');
    }
    var content = dom.data('content')
    var id = dom.parents('.video-time-box').attr('id');
    $('#' + id + '_video').html(url)
    $('#' + id + '_outline').text(content)
}
</script>

</html>